<template>
	<view class="entrySubmit">
		<!-- 材料入库 --- 发起提交 -->
		<view class="content required-form-Box">
			<u-form :model="form" ref="form" :rules="rules" labelPosition="left" labelWidth="auto" class="form"
			:labelStyle="{fontSize: '32rpx', fontWeight: '600',color: '#445469'}">
				<!-- 材料型号 -->
				<u-form-item label="材料类型"  prop="deviceTypeName" borderBottom labelWidth="200rpx" @click="materiaisTypeShow=true">
					<view class="required-form-item">*</view>
					<u--input
						v-model="form.deviceTypeName"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择材料型号"
						border="none">
					</u--input>
					<u-picker @cancel="materiaisTypeShow=false" :immediateChange="true" @confirm="materiaisTypeConfirm" keyName="name" :show="materiaisTypeShow" :columns="materiaisTypeColumns"></u-picker>
					<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
				</u-form-item>
				<!-- 材料名称 -->
				<u-form-item label="材料名称"  prop="subDeviceTypeName" borderBottom labelWidth="200rpx" @click="materiaisNameShow=true">
					<view class="required-form-item">*</view>
					<u--input
						v-model="form.subDeviceTypeName"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择材料名称"
						border="none">
					</u--input>
					<u-picker @cancel="materiaisNameShow=false" :immediateChange="true"  @confirm="materiaisNameConfirm"  keyName="name"  :show="materiaisNameShow" :columns="materiaisNameColumns"></u-picker>
					<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
				</u-form-item>
				<u-form-item label="型号规格"  borderBottom labelWidth="200rpx" @click="specificationModelShow=true">
					<u--input
						v-model="form.specificationModelName"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择材料型号"
						border="none">
					</u--input>
					<u-picker @cancel="specificationModelShow=false" :immediateChange="true" @confirm="specificationModelConfirm"  keyName="model"  :show="specificationModelShow" :columns="specificationModelColumns"></u-picker>
					<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
				</u-form-item>
				<!-- 供应商 -->
				<u-form-item label="供应商" prop="supplier" borderBottom labelWidth="200rpx" @click="supplierShow=true">
					<view class="required-form-item">*</view>
					<u--input
						v-model="form.supplier"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择供应商"
						border="none">
					</u--input>
					<u-picker @cancel="supplierShow=false" :immediateChange="true"  @confirm="supplierConfirm"  keyName="name"  :show="supplierShow" :columns="supplierList"></u-picker>
					<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
				</u-form-item>
				<!-- 生产日期 -->
				<u-form-item label="生产日期" prop="productionDate" borderBottom labelWidth="200rpx" @click="productionDateShow=true">
					<view class="required-form-item">*</view>
					<u--input
						v-model="form.productionDate"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择生产日期"
						border="none">
					</u--input>
					<u-datetime-picker @cancel="productionDateShow=false" @confirm="productionDateConfirm" :show="productionDateShow" v-model="productionDate" mode="date" ></u-datetime-picker>
					<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
				</u-form-item>
				<!-- 保质期 -->
				<u-form-item label="保质期" prop="shelfLife" borderBottom labelWidth="200rpx">
					<view class="required-form-item">*</view>
					<view class="value value-nav">
						<u--input
							type='number'
							v-model="form.shelfLife"
							placeholder="请输入保质期"
							border="none">
						</u--input>
						<text class="day">月</text>
					</view>
				</u-form-item>
				<!-- 单价 -->
				<!-- <u-form-item label="单价" prop="price" borderBottom labelWidth="200rpx">
					<view class="required-form-item">*</view>
					<view class="value">
						<u--input
							type='number'
							v-model="form.price"
							placeholder="请输入单价"
							border="none">
						</u--input>
						<text>元</text>
					</view>
				</u-form-item> -->
				<!-- 存放基地 -->
				<u-form-item label="存放基地" prop="stationName" borderBottom labelWidth="200rpx" @click="stationShow=true"> 
					<view class="required-form-item">*</view>
					<u--input
						v-model="form.stationName"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择存放基地"
						border="none">
					</u--input>
					<u-picker @cancel="stationShow=false"  :immediateChange="true" @confirm="stationConfirm"  keyName="name"  :show="stationShow" :columns="stationList"></u-picker>
					<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
				</u-form-item>
					<!-- <view v-for="(item,index) in form.materialInWarehouseItemList" :key="index">
						<u-form-item label="存储区域" borderBottom labelWidth="200rpx" :prop="index+'-storageAreaId'" @click="storageAreaClick(index)">
							<view class="required-form-item">*</view>
							<u--input v-model="item.storageAreaName" disabled disabledColor="#ffffff" placeholder="请选择存储区域" border="none" >
							</u--input>
							<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
						</u-form-item>
						<u-form-item label="入库数量" borderBottom labelWidth="200rpx" :prop="index +'-num'">
							<view class="required-form-item">*</view>
							<view class="value">
								<u--input  type='number' v-model="item.num" @blur='numBlur(item.num,index)' placeholder="请输入入库数量" border="none"></u--input>
								<text  class="text">{{form.unit}}</text>
							</view>
						</u-form-item>
					</view> -->
					<!-- <u-picker @cancel="storageAreaShow=false"  @confirm="storageAreaConfirm"  keyName="name"  :show="storageAreaShow" :columns="storageAreaList"></u-picker> -->
					<u-form-item label="入库数量" borderBottom labelWidth="200rpx" prop="num">
						<view class="required-form-item">*</view>
						<view class="value value-nav">
							<!-- #ifdef APP-PLUS || H5 -->
							<u--input  type='number' v-model="form.num" @change="numChange" placeholder="请输入入库数量" border="none"></u--input>
							<text class="day">{{form.unit}}</text>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<u--input  type='digit' v-model="form.num" @change="numChange" placeholder="请输入入库数量" border="none"></u--input>
							<text class="day">{{form.unit}}</text>
							<!-- #endif -->
						</view>
					</u-form-item>
			</u-form>
			<!-- 
			<view class="addArea" @click="getAddStrong">
				<image class="image" src="/static/image/universal/add.png" mode=""></image>
				<text class="text">添加存储区域</text>
			</view> -->
		</view>
		<u-button type="primary" :loading="loading" class="button" @click="submit">
			提交
		</u-button>
	</view>
</template>

<script>
import { getDeviceType, getSupplierList } from "@/api/emergency/emergencyDispatch.js"
import { getStationList, getStorageAreaList} from "@/api/baseManage/baseManage.js"
import { getMaterialSaveEx, getDeviceTypeAttributeList} from "@/api/materials/materials.js"
import mixins from "@/utils/mixins.js"
	export default {
		name: "entrySubmit",
    mixins: [mixins],
		components:{
		},
		data() {
			return {
				loading:false,
				form: {
					deviceTypeId:"", 
					specificationModelName:"",
					specificationModel:null,
					deviceTypeName:"",
					subDeviceTypeName:"",
					subDeviceTypeId:"",
					supplierId:"",
					supplier:"",
					productionDate:"",
					stationId:"",
					stationName:"",
					price:0,
					shelfLife:"",
					num: "",
					materialInWarehouseItemList: [ // 存放区域列表
						{
							stationId: "", // 存放基地id
							storageAreaId: "", // 存放区域id
							storageAreaName:"",
							num: "", // 入库数量
						}
					],
					unit:"",
				},
				rules:{
					'deviceTypeName':{
						type:'string',
						required: true,
						message: '请选择材料类型',
						trigger: ['blur', 'change']
					},
					'subDeviceTypeName':{
						type:'string',
						required: true,
						message: '请选择材料名称',
						trigger: ['blur', 'change']
					},
					'supplier':{
						type:'string',
						required: true,
						message: '请选择供应商',
						trigger: ['blur', 'change']
					},
					'productionDate':{
						type:'string',
						required: true,
						message: '请选择生产日期',
						trigger: ['blur', 'change']
					},
					'shelfLife':[{
						type:'string',
						required: true,
						message: '请输入保质期',
						trigger: ['blur', 'change']
					},
					{
						required: true,
						pattern: /^\d+$/,
						message: '请输入整数',
						trigger: ['blur']
					}],
					'stationName':{
						type:'string',
						required: true,
						message: '请选择存放基地',
						trigger: ['blur', 'change']
					},
					'num':[{
						type:'string',
						required: true,
						message: '请输入入库数量',
						trigger: ['blur', 'change']
					},
					{
						required: true,
						pattern: /^\d+$/,
						message: '请输入整数',
						trigger: ['blur']
					}]
				},
				// rules: {
					// 'deviceTypeName':{
					// 	type:'string',
					// 	required: true,
					// 	message: '请选择材料类型',
					// 	trigger: ['blur', 'change']
					// },
					// 'subDeviceTypeName':{
					// 	type:'string',
					// 	required: true,
					// 	message: '请选择材料名称',
					// 	trigger: ['blur', 'change']
					// },
					// 'supplier':{
					// 	type:'string',
					// 	required: true,
					// 	message: '请选择供应商',
					// 	trigger: ['blur', 'change']
					// },
					// 'productionDate':{
					// 	type:'string',
					// 	required: true,
					// 	message: '请选择生产日期',
					// 	trigger: ['blur', 'change']
					// },
					// 'shelfLife':{
					// 	type:'string',
					// 	required: true,
					// 	message: '请输入保质期',
					// 	trigger: ['blur', 'change']
					// },
					// 'price':[{
					// 	type:'string',
						
					// 	required: true,
					// 	message: '请输入单价',
					// 	trigger: ['blur', 'change']
					// },
					// {
					// 	required: true,
					// 	pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{2})$/g,
					// 	message: '请保留小数点后两位',
					// 	trigger: ['blur']
					// }
					// ],
					// 'stationName':{
					// 	type:'string',
					// 	required: true,
					// 	message: '请选择存放基地',
					// 	trigger: ['blur', 'change']
					// },
					// 'stationId': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请选择存放基地',
					// 	trigger: ['change']
					// },
					// '0-storageAreaId': {
					// 	dataIndex: 0,
					// 	dataValue: "storageAreaId",
					// 	validator: this.validator,
					// 	message: '请选择存放区域',
					// 	trigger: ['change','blur']
					// },
					// '0-num': {
					// 	dataIndex: 0,
					// 	dataValue: "num",
					// 	validator: this.validator,
					// 	message: '请输入入库数量',
					// 	trigger: ['change','blur']
					// }
				// },
				productionDate:Number(new Date()),
				materiaisTypeShow:false,
				materiaisNameShow:false,
				supplierShow:false,
				productionDateShow:false,
				stationShow:false,
				storageAreaShow:false,
				specificationModelShow:false,
				specificationModelColumns:[],
				materiaisTypeColumns:[],
				materialsList:[],//完整的材料数据
				materiaisNameColumns:[],//材料名称
				supplierList:[],//供应商
				stationList:[],//基地
				storageAreaList:[],
				storageAreaIndex:-1,
				modelList:[],  //型号规格
			}			
		},
		mounted() {
			// this.$refs.from.setRules(this.rules)
			this.init();
		},
		methods: {
			//校验存储信息
			// validator(rule, value, callback) {
			// 	let index = rule.dataIndex
			// 	let key = rule.dataValue
			// 	if (!this.form.materialInWarehouseItemList[index] || !this.form.materialInWarehouseItemList[index][key]) {
			// 		return false
			// 	}
			// 	return true
			// },
			async init(){
				//获取材料类型列表
				  let _data = {
					name: "",
					ex1: "material"
				}
				let deviceTypeRes=await getDeviceType(_data)
				console.log('type',deviceTypeRes)
				if(deviceTypeRes.success){
					this.materiaisTypeColumns=[deviceTypeRes.result.filter(item=>item.treeLevel == 2)]
					this.materialsList = deviceTypeRes.result
				}
				
				// 获取供应商列表数据
				let _query={
					currPage:1,
					pageSize:10000,
					params:{}
				}
				let list = await getSupplierList(_query)
				this.supplierList = [list.result.list]
				// 基地数据
				let base = await getStationList({typeIds: [102,104], name: ""})
				this.stationList =[base.result]
				
				let res = await getDeviceTypeAttributeList({currPage: 1,pageSize: 10000,params:{type:"material"}})
				this.modelList = res.result.list
				
			},
			// getAddStrong(){
			// 	let obj = {stationId: "", storageAreaId: "", num: ""}
			// 	this.form.materialInWarehouseItemList.push(obj)
			// 	this.addRule()
			// },
			// addRule() {
			// 	let index = this.form.materialInWarehouseItemList.length - 1
			// 	if (!this.rules[index + "-storageAreaId"]) {
			// 		this.rules[index + "-storageAreaId"] = {
			// 			dataIndex: index,
			// 			dataValue: "storageAreaId",
			// 			validator: this.validator,
			// 			message: '请选择存放区域',
			// 			trigger: ['change']
			// 		}
			// 	}
			// 	if (!this.rules[index + "-num"]) {
			// 		this.rules[index + "-num"] = {
			// 			dataIndex: index,
			// 			dataValue: "num",
			// 			validator: this.validator,
			// 			message: '请输入入库数量',
			// 			trigger: ['change']
			// 		}
			// 	}
			// 	this.$refs.from.setRules(this.rules)
			// },
			// storageAreaClick(index){
			// 	this.storageAreaShow=true
			// 	this.storageAreaIndex=index
				
			// },
			// storageAreaConfirm(val){
			// 	let data=val.value[0]
			// 	if(data){
			// 		let json={
			// 			storageAreaName:data.name,
			// 			storageAreaId:data.id,
			// 			stationId:this.form.stationId
			// 		}
			// 		this.form.materialInWarehouseItemList[this.storageAreaIndex]=json
			// 	}
			// 	this.storageAreaShow=false
			// 	this.storageAreaIndex=-1
			// },
			numChange(val){
				console.log(val,'val')
				this.form.num=val
			},
			materiaisTypeConfirm(e){
				let val=e.value[0]
				this.form.deviceTypeName=val.name
				this.form.deviceTypeId=val.id
				this.form.specificationModel=""
				this.form.specificationModelName=""
				this.form.subDeviceTypeName=""
				this.form.subDeviceTypeId=""
				this.specificationModelColumns=[{}]
				this.materiaisNameColumns=[{}]
				this.materiaisTypeShow=false
				this.materiaisNameColumns = [this.materialsList.filter(item=>item.parentId === val.id)]
			},
			materiaisNameConfirm(e){
				let val=e.value[0]
				this.form.subDeviceTypeName=val.name
				this.form.subDeviceTypeId=val.id
				this.materiaisNameShow=false
				this.form.specificationModel=""
				this.form.specificationModelName=""
				this.specificationModelColumns=[{}]
				console.log(this.modelList)
				this.specificationModelColumns = [this.modelList.filter(item=>item.subDeviceTypeId === val.id)]
				console.log(this.specificationModelColumns)
				let _data = this.specificationModelColumns[0].find(item=>!item.model)
				if(_data){
					console.log('_data',_data)
					this.form.unit = _data.unit  
					console.log('unit',unit)
				}
			},
			specificationModelConfirm(e){
				console.log(e)
				let val=e.value[0]
				this.form.specificationModelName=val.model
				this.form.specificationModel=val.id
				this.specificationModelShow=false
				this.form.unit = val.unit
				console.log(this.form.unit)
			},
			supplierConfirm(e){
				let val=e.value[0]
				this.form.supplier=val.name
				this.form.supplierId=val.id
				this.supplierShow=false
			},
			productionDateConfirm(val){
				let now =this.getDate(val.value)
				this.form.productionDate=now
				this.productionDateShow=false
			},
			stationConfirm(e){
				let val=e.value[0]
				this.form.stationId=val.id
				this.form.stationName=val.name
				this.stationShow=false
				this.storageAreaList = []
				let _query = {
					currPage: 1,
					pageSize: 10000,
					params: {
						stationId: val.id
					},
				}
				this.form.materialInWarehouseItemList.forEach(item=>{
					item.storageAreaName=""
					item.num=""
				})
				getStorageAreaList(_query).then(res=>{
					if(res.success){
						this.storageAreaList = [res.result.list]
						let obj={
							storageAreaId:res.result.list[0].id,
							storageAreaName:res.result.list[0].name,
							stationId:val.id,
							num:0
						}
						this.form.materialInWarehouseItemList=[obj]
					}
				})
				
			},
			submit(){
				this.$refs.form.validate().then(result=>{
					let time = this.getDate(this.form.productionDate)
					this.form.expirationDate = this.GetNextMonthDay(time,this.form.shelfLife)
					this.loading = true
					if(!this.form.specificationModel){
						this.form.specificationModel=null
					}
					this.form.materialInWarehouseItemList[0].num = +this.form.num
					// console.log(this.form)
					getMaterialSaveEx(this.form).then(res=>{
						console.log('res',res)
						if(res.success){
							this.loading = false
							uni.showToast({
								title:'保存成功'
							})
							this.clearParam()
						}else{
							this.loading = false
							uni.showToast({
								title:'保存失败',
								icon:'error'
							})
						}
					}).catch(()=>{this.loading = false})
				}).catch(errors=>{
					console.log('error',errors)
				})
			},
			clearParam(){
				this.form={
					deviceTypeId:"", 
					deviceTypeName:"",
					subDeviceTypeName:"",
					subDeviceTypeId:"",
					supplierId:"",
					supplier:"",
					productionDate:"",
					stationId:"",
					stationName:"",
					price:"",
					shelfLife:"",
					num: "",
					materialInWarehouseItemList: [ // 存放区域列表
						{
							stationId: "", // 存放基地id
							storageAreaId: "", // 存放区域id
							storageAreaName:"",
							num: "", // 入库数量
						}
					]
				}
			}
	},
	}
</script>

<style lang="scss" scoped>
	.entrySubmit{
		padding-top: 20rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		.content{
			padding: 35rpx;
			.value{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.value-nav{
				position: relative;
				.day{
					position: absolute;
					top: 0rpx;
					right: 0rpx;
				}
			}
			.addArea{
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				background: #F5F7FA;
				font-size: 32rpx;
				font-weight: bold;
				color: #445469;
				margin-top: 40rpx;
				text-align: center;
				margin-bottom: 40rpx;
				
				.image{
					width: 50rpx;
					height: 50rpx;
					margin-bottom: -13rpx;
				}
			}
		}
		
		.button{
			height: 92rpx;
			line-height: 92rpx;
			background: #2F80ED;
			color: #FFFFFF;
			text-align: center;
			font-size: 32rpx;
			margin-bottom: 50rpx;
		}
	}
</style>
